<template>
  <view class="order-container">
    <view class="order-card" v-for="order in props.orders.data" :key="order.salesId">
      <view class="shop-header">
		  <view class="store-info">
		     <!--  <image class="store-icon" :src="orders[0].items[0].image" mode="aspectFill"/> -->
		       <text class="store-name">{{ order.store.storeName }}</text>
		    </view>
        <text class="status">  {{ getPaymentStatus(order.paymentStatus) }}</text>
      </view>
      
      <!-- 商品列表 -->
      <view class="product-box" v-for="item in order.salesOrderDetail" :key="item.detailId">
        <view class="product-image">
          <image :src="item.product.productImageUrl" mode="aspectFill" class="product-img"/>
        </view>
        <view class="product-info">
          <text class="product-name">{{ item.product.productName }}</text>
          <text class="spec">规格：{{ item.product.productSpecifications }}</text>
          <view class="price-row">
            <text class="price">￥{{ item.unitPrice }}</text>
            <text class="quantity">x{{ item.quantity }}</text>
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
     <view class="order-footer">
       <text class="time-text">下单时间：{{ order.businessDate }}</text>
       <view class="total-section">
		   <text class="total-count">共{{ getTotalQuantity(order) }}件 </text>
         <view class="amount-box">
           <!-- 计算应付总额 -->
		    
           <text class="total-price"> <text class="total-count">应付总额: </text>￥{{ getTotalPrice(order) }}</text>
         </view>
       </view>
	   <view class="amount-box">
	   			 <button
	   			    v-if="order.paymentStatus == 1" 
	   			    class="action-button"
	   			    @click="handleReorder(order)"
	   			  >支付订单</button>
	   			 	
	   			  <button 
	   			    v-if="order.paymentStatus == 2" 
	   			    class="action-button"
	   			    @click="viewOrderDetail(order.salesId)"
	   			  >订单详情</button>
				 <button
				    v-if="order.paymentStatus == 3" 
				    class="action-button"
				    @click="viewOrderDetail(order.salesId)"
				  >订单详情</button>
				  <button
				     v-if="order.paymentStatus == 4" 
				     class="action-button"
				     @click="viewOrderDetail(order.salesId)"
				   >订单详情</button>
	   </view>
     </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  orders: {
    type: Array,
    required: true
  }
})


const getTotalQuantity = (order) => {
  return order.salesOrderDetail.reduce((sum, item) => sum + item.quantity, 0);
};

const getTotalPrice = (order) => {
  const total = order.salesOrderDetail.reduce(
    (sum, item) => sum + item.quantity * item.unitPrice,
    0
  );
  return total.toFixed(2); // 保留两位小数
};

//
const getPaymentStatus = (status) => {
  const statusMap = {
    1: '待支付',
    2: '代发货',
    3: '配送中',
    4: '代收货',
	5: '已收货',
	6: '123123'
  }
  return statusMap[status]
}


// 支付订单
const handleReorder = (order) => {
	uni.navigateTo({
		url:`/pages/order/orderDetail?order=${order}`
	})
}

// 查看订单详情
const viewOrderDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/order/orderDetail?id=${orderId}`
	})
}



</script>

<style lang="scss" scoped>
.order-container {
  padding: 20rpx;
}

.order-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .shop-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20rpx;
	
	display: flex;
	  justify-content: space-between; /* 左右两侧对齐 */
	  align-items: center; /* 垂直居中 */
	  padding-bottom: 30rpx;
	  border-bottom: 1rpx solid #eee;
		
		
		.store-info {
	  display: flex;
	  align-items: center;
	  gap: 15rpx; /* 元素间距 */
	
	  .store-icon {
	    width: 90rpx;
	    height: 90rpx;
	    border-radius: 50rpx;
	  }
	
	  .store-name {
	    font-size: 35rpx;
	    color: #333;
	  }
	}
	
	.order-no {
	  font-size: 28rpx;
	  color: #666;
	}
	
    
    .shop-name {
      font-size: 34rpx;
      font-weight: bold;
    }
    
    .status {
      color: #13bcd0;
      font-size: 30rpx;
    }
  }

  .product-box {
    display: flex;
    margin-bottom: 30rpx;
    
    .product-image {
      width: 180rpx;
      height: 180rpx;
      margin-right: 20rpx;
      
      .product-img {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }

    .product-info {
      flex: 1;
	  display:flex;
	  flex-direction: column;
	  justify-content: space-around;
	  

      .product-name {
        font-size: 30rpx;
        color: #333;
        line-height: 1.4;
      }
      
      .spec {
        font-size: 26rpx;
        color: #999;
        margin: 10rpx 0;
      }
      
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .price {
          color: #e53b03;
          font-size: 32rpx;
        }
        
        .quantity {
          color: #666;
          font-size: 28rpx;
        }
      }
    }
  }

  .order-footer {
    border-top: 1rpx solid #eee;
    padding-top: 20rpx;
    
    .time-text {
      color: #999;
      font-size: 26rpx;
      margin-bottom: 36rpx;
    }

    .total-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
	  
	  .total-count{
	  	font-size: 25rpx;
	  	color: #999;
	  }
      
      .amount-box {
        display: flex;
        align-items: center;
        
        .total-price {
    
          font-size: 36rpx;
          margin-right: 15rpx;
        }
		
        
        .action-button {
          background: #e53b03;
          color: #fff;
          font-size: 28rpx;
          border-radius: 40rpx;
          padding: 12rpx 40rpx;
          line-height: 1.5;
        }
      }
    }
  }
}

.amount-box {
    display: flex;
    align-items: center;
    gap: 20rpx; // 增加按钮和金额之间的间距
    
    .action-button {
      flex-shrink: 0; // 防止按钮被压缩
      background: #08b9ce;
      color: #fff;
      font-size: 28rpx;
      border-radius: 40rpx;
      padding: 12rpx 40rpx;
      line-height: 1.5;
      margin-right: 20rpx; // 与金额保持间距
	   margin-top: 20rpx;
      
      // 如果需要不同状态按钮的不同样式
      &[status="detail"] {
        background: #666;
      }
    }
  }
</style>